<template>
  <div>
    <Card style="margin-bottom:20px">
      <Row gutter="40">
        <Form ref="examForm" :model="examForm" :rules="rules">
          <i-col span="6">
            <FormItem prop="organization">
              <Cascader change-on-select :data="organizationList" v-model="examForm.organization" placeholder="培训管理机构" clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem prop="date">
              <DatePicker
                type="daterange"
                v-model="examForm.date"
                placeholder="培训发布起止期"
                :editable="false"
                style="width:100%"
              ></DatePicker>
            </FormItem>
          </i-col>
        </Form>
      </Row>
      <Row>
        <i-col>
          <Button type="primary" @click="query" :loading="queryLoading">查询</Button>
          <Button type="default" @click="resetForm" style="margin-left:10px;">重置</Button>
        </i-col>
      </Row>
    </Card>
    <Card>
      <div class="title">培训结果清单</div>
      <Table :data="listData" :columns="listColumns">
        <template slot-scope="{row}" slot="plannumber">
          <span v-if="row.trainflag !== '0'">{{row.plannumber}}</span>
          <span v-else>-</span>
        </template>
        <template slot-scope="{row}" slot="realnumber">
          <span v-if="row.trainflag === '2'">{{row.realnumber}}</span>
          <span v-else>-</span>
        </template>
        <template slot-scope="{row}" slot="passnumber">
          <span v-if="row.trainflag === '2'">{{row.passnumber}}</span>
          <span v-else>-</span>
        </template>
        <template slot-scope="{row}" slot="passrate">
          <span v-if="row.trainflag === '2'">{{row.passrate}}</span>
          <span v-else>-</span>
        </template>
        <template slot-scope="{row}" slot="detial">
          <span class="tableDetail" @click="trainDetail(row)">培训详情</span>
          <span class="tableDetail" @click="examModal(row)" v-if="row.trainflag === '2'">考核明细</span>
          <span class="tableDetail" v-else>-</span>
        </template>
      </Table>
      <Page
        :total="total"
        show-sizer
        show-total
        style="text-align:right;margin-top:20px"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        :page-size-opts="pageSizeOptions"
        :current="pageIndex"
        :page-size="pageSize"
        transfer
      ></Page>
      <Modal
        footer-hide="true"
        :value="examDetailModal"
        :mask-closable="false"
        @on-visible-change="modalVisibleChange"
        width="1000"
      >
        <span slot="header" style="color:#fff;font-size:16px">考核结果统计</span>
        <Row gutter="40">
          <i-col span="12">
            <Card>
              <div class="title">考核结果统计</div>
              <div v-show="zhuzhuang">
                <div id="c2"></div>
              </div>
            </Card>
          </i-col>
          <i-col span="12">
            <Card>
              <div class="title">员工清单</div>
              <Table :data="employeeData" :columns="employeeColumns" max-height="305"></Table>
            </Card>
          </i-col>
        </Row>
      </Modal>
    </Card>
  </div>
</template>

<script>
import util from "../../../util/util";
export default {
  data() {
    return {
      // 表单数据
      examForm: {
        organization: "",
        date: ["", ""]
      },
      organizationList: [],
      rules: {
        organization: [{ required: true, message: "培训管理机构不能为空" }]
      },
      // 表格数据
      listColumns: [
        {
          title: "管理机构",
          key: "managecom",
          width: "300",
          fixed: "left"
        },
        {
          title: "培训主题",
          key: "theme",
          width: "180"
        },
        {
          title: "状态",
          key: "trainflagName",
          width: "130",
          align: "center"
        },
        {
          title: "发起人",
          key: "originatorname",
          width: "130",
          align: "center"
        },
        {
          title: "计划考核人数",
          key: "plannumber",
          width: "130",
          align: "center",
          slot: "plannumber"
        },
        {
          title: "实际考核人数",
          key: "realnumber",
          width: "130",
          align: "center",
          slot: "realnumber"
        },
        {
          title: "合格人数",
          key: "passnumber",
          width: "130",
          align: "center",
          slot: "passnumber"
        },
        {
          title: "考核通过率",
          key: "passrate",
          width: "130",
          align: "center",
          slot: "passrate"
        },
        {
          title: "查看详情",
          key: "detial",
          minWidth: 200,
          align: "center",
          slot: "detial"
        }
      ],
      listData: [],
      examDetailModal: false,
      // 员工清单表格数据
      employeeColumns: [
        {
          title: "员工编号",
          key: "agentcode",
          width: "100",
          align: "center"
        },
        {
          title: "员工姓名",
          key: "name",
          width: "100",
          align: "center"
        },
        {
          title: "考核结果",
          key: "examResult",
          width: "100",
          align: "center"
        },
        {
          title: "考核分数",
          key: "score",
          minwidth: "100",
          align: "center"
        }
      ],
      employeeData: [
        {
          employeeNo: "123123",
          employeeName: "123",
          examResult: "123",
          examGrade: "123"
        }
      ],
      data1: [],
      zhuzhuang: true,
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageSizeOptions: [2, 10, 15, 20],
      flag: 0,
      chart: "",
      queryLoading: false,
      pageObj: ""
    };
  },
  methods: {
    // 重置表单
    resetForm() {
      this.examForm = {
        organization:[]
      }
      this.$refs.examForm.resetFields();
    },

    //查询
    query() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.$refs.examForm.validate(valid => {
        if (valid) {
          this.queryLoading = true;
          let obj = {
            managecom: this.examForm.organization
              ? this.examForm.organization[this.examForm.organization.length-1]
              : null,
            startdate: util.dateToISOString(this.examForm.date[0]),
            enddate: util.dateToISOString(this.examForm.date[1]),
            index: this.pageIndex,
            pageSize: this.pageSize
          };
          this.pageObj = obj;
          this.api.selectstatisticstrain(obj).then(res => {
            if ((res.code == 200) & (res.data != null)) {
              this.$Message.info(res.msg);
              this.listData = res.data.records;
              this.total = res.data.total;
              this.listData.forEach(element => {
                if (element.managecom && element.managecomname) {
                  element.managecom =
                    element.managecom + "-" + element.managecomname;
                }
                if (element.trainflag) {
                  element.trainflagName =
                    element.trainflag == "0"
                      ? "无考核"
                      : element.trainflag == "1"
                      ? "考核未结束"
                      : "考核已结束";
                }
                if (element.passrate !== null) {
                  element.passrate = element.passrate * 100 + "%";
                }
              });
            } else {
              this.total = 0;
              this.listData = [];
              this.$Message.info(res.msg);
            }
            this.queryLoading = false;
          });
        } else {
          this.$Message.info("条件输入有误");
        }
      });
    },

    // 分页查询
    pageQuery() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.selectstatisticstrain(this.pageObj).then(res => {
        if ((res.code == 200) & (res.data != null)) {
          this.listData = res.data.records;
          this.total = res.data.total;
          this.listData.forEach(element => {
            if (element.managecom && element.managecomname) {
              element.managecom =
                element.managecom + "-" + element.managecomname;
            }
            if (element.trainflag) {
              element.trainflagName =
                element.trainflag == "0"
                  ? "无考核"
                  : element.trainflag == "1"
                  ? "考核未结束"
                  : "考核已结束";
            }
            if (element.passrate !== null) {
              element.passrate = element.passrate * 100 + "%";
            }
          });
        } else {
          this.total = 0;
          this.listData = [];
          this.$Message.info(res.msg);
        }
      });
    },

    // 点击培训详情
    trainDetail(row) {
      this.$router.push({
        name: "examMessageDetail",
        query: {
          item: row
        }
      });
    },

    // 点击考核明细
    examModal(row) {
      this.examDetailModal = true;
      this.api.selectUerTrainDetail({ trainid: row.trainid }).then(res => {
        if (res.code == 200 && res.data != null) {
          this.data1 = [];
          if (res.data.passnumber !== null && res.data.nopassnumber !== null) {
            this.data1.push({
              type: "通过",
              value: parseInt(res.data.passnumber)
            });
            this.data1.push({
              type: "不通过",
              value: parseInt(res.data.nopassnumber)
            });
            this.zhuzhuang = true;
          } else {
            this.zhuzhuang = false;
          }
          this.initComponent();
          if (res.data.uerTrainUserScoreVOS) {
            this.employeeData = res.data.uerTrainUserScoreVOS;
            this.employeeData.forEach(element => {
              if (element.passflag) {
                if (element.passflag === "0") {
                  element.examResult = "通过";
                }
                if (element.passflag === "1") {
                  element.examResult = "不通过";
                }
              }
            });
          } else {
            this.employeeData = [];
          }
        }
      });
    },

    // 弹窗关闭
    modalVisibleChange(value) {
      if (!value) {
        this.examDetailModal = false;
      }
    },

    // 考核明细柱形图
    initComponent() {
      if (this.flag === 0) {
        const Shape = G2.Shape;

        this.chart = new G2.Chart({
          container: "c2",
          width: 400,
          height: 300,
          padding: [30, 30, 30, 30]
        });

        this.chart.source(this.data1);

        this.chart.interval().position("type*value"); //将数据值映射到图形的位置上的方法。
        // .color("type"); // 对rate字段进行映射，使用内置颜色
        this.chart.render();
        this.flag++;
      } else {
        this.chart.changeData(this.data1);
      }
    },

    // 分页
    pageChange(index) {
      this.pageIndex = index;
      this.pageQuery();
    },

    pageSizeChange(index) {
      this.pageSize = index;
      this.pageQuery();
    },

    initial() {
      // this.api.organizationDict().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     if (res.data[0].listKeyValueVOS) {
      //       this.organizationList = res.data[0].listKeyValueVOS;
      //     }
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    }
  },
  mounted() {
    this.initial();
  },
  beforeDestroy() {
    this.examForm = null;
    this.organizationList = null;
    this.rules = null;
    this.listColumns = null;
    this.listData = null;
    this.examDetailModal = null;
    this.employeeColumns = null;
    this.employeeData = null;
    this.data1 = null;
    this.zhuzhuang = null;
    this.total = null;
    this.pageIndex = null;
    this.pageSize = null;
    this.pageSizeOptions = null;
    this.flag = null;
    this.chart = null;
    this.queryLoading = null;
    this.pageObj = null;
  }
};
</script>
<style scoped lang="less">
@import "./index";
</style>